<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <title>combobox</title>
    <link href="../../../../src/css/assets/dpl/base.css" rel="stylesheet"/>
    <link href="../../../button/assets/dpl.css" rel="stylesheet"/>
    <link href="../../../menu/assets/dpl.css" rel="stylesheet"/>
    <link href="../../assets/dpl.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
    <section id="combobox">
        <div class="page-header">
            <h1>combobox
                <small>输入文本提示</small>
            </h1>
        </div>
        <div class="row">
            <div class="span6">
                <h3>关于 suggest</h3>

                <p>当用户输入文本时，显示相关联的提示选项，包括：suggest,combobox等方式</p>
            </div>
            <div class="span9">
                <h3>suggest 示例</h3>

                <p>使用已有DOM生成 suggest（附带验证）</p>

                <div>
                    <div class="ks-combobox" id="J_AutoComplete" style="width: 200px; ">
                        <div class="ks-combobox-input-wrap">
                            <input class="ks-combobox-input" id="inp">
                            <div class="ks-combobox-clear" unselectable="on"
                                 style="display: none"
                                 onmousedown="return false">
                                <div class="ks-combobox-clear-inner"></div>
                                 </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="span9">
                <h3>suggest 示例</h3>

                <p>使用已有js生成 suggest,可以通过配置格式化函数，格式化建议项，并且可以禁用建议项(输入 a 试试)</p>

                <div id="inp_container">
                </div>

            </div>
        </div>
        <div class="row">
            <div class="span6">
                <h3>关于combobox</h3>

                <p>组合框，是一个输入框和下拉菜单构成，一起组合使用更方便用户</p>
            </div>
            <div class="span9">
                <h3>combobox示例</h3>

                <p>利用现有DOM生成combobox</p>

                <div>
                    <div class="ks-combobox" id="J_Combox" style="width:200px">
                        <div class="ks-combobox-trigger">
                            <div class="ks-combobox-trigger-inner">▼</div>
                        </div>
                        <div class="ks-combobox-input-wrap">
                            <input class="ks-combobox-input">
                        </div>
                    </div>
                </div>

            </div>
            <div class="span9">
                <h3>combobox 示例</h3>

                <p>利用js生成 combobox</p>

                <div id="inp-combobox-container">

                </div>

            </div>
        </div>

        <div class="row">
            <div class="span6">
                <h3>Filter Select</h3>

                <p>相当于带过滤功能的 select</p>
            </div>
            <div class="span9">
                <h3>FilterSelect</h3>

                <p>利用现有 Dom 生成 Filter Select</p>

                <div>
                    <div class="ks-combobox" id="J_Combox_Check" style="width:200px">
                        <div class="ks-combobox-trigger">
                            <div class="ks-combobox-trigger-inner">▼</div>
                        </div>
                        <div class="ks-combobox-input-wrap">
                            <input class="ks-combobox-input" id="xx">
                            <label style="display: block;"
                                   for="xx"
                                   class="ks-combobox-placeholder"> 请输入 </label>
                        </div>
                    </div>
                </div>

            </div>
            <div class="span9">
                <h3>Filter Select 示例</h3>

                <p>利用js生成 Filter Select</p>

                <div id="inp-combobox-container-check">

                </div>

                <div style="margin: 10px 0; ">
                    <button id="check" class="ks-button">是否验证通过</button>

                    <label><input type="checkbox" id="disable"/>禁用</label>
                </div>

            </div>
        </div>
    </section>
</div>
<script src="/kissy/build/seed-debug.js"></script>
<script src="/kissy/src/package.js"></script>
<script>
    /**/
    KISSY.use('combobox,node', function (S, ComboBox,$) {
        var data = ["a123456", "b12345", "c3464356", "d23434"];
        var basicComboBox = new ComboBox({
            srcNode: $("#J_AutoComplete"),
            validator: function (v, complete) {
                complete(!v ? "必填" : "");
            },
            width: 200,
            // 初始就聚焦
            // focused:true,
            hasTrigger: false,
            dataSource: new ComboBox.LocalDataSource({
                data: data
            })
        });
        basicComboBox.render();

        // 得到焦点时展示全部
        $("#inp").on('focus', function () {
            basicComboBox.sendRequest('');
        });
        /**/
    });

    KISSY.use('combobox,util', function (S, ComboBox,util) {
        var data = ["a123456", "b12345", "c3464356", "d23434"];

        var basicComboBox = new ComboBox({
            render: "#inp_container",
            width: 200,
            value:'c',
            dataSource: new ComboBox.LocalDataSource({
                data: data
            }),
            hasTrigger: false,
            maxItemCount: 2,
            format: function (query, data) {
                var ret = [];
                for (var i = 0; i < data.length; i++) {
                    ret[i] = {
                        content: (data[i] + "")
                                .replace(new RegExp(util.escapeRegExp(query), "g"),
                                        "<b>$&</b>"),
                        disabled: (i % 2 ? true : false)
                    };
                }
                return ret;
            }
        });
        basicComboBox.render();

        basicComboBox.on("click", function (e) {
            var item = e.target;
            S.log(item.get("value") + "\n" + item.get("content") +
                    "\n" + item.get('textContent'));
        });
    });

    KISSY.use('combobox,node', function (S, ComboBox,$) {
        var data = ["a123456", "b12345", "c3464356", "d23434"];

        var basicComboBox = new ComboBox({
            srcNode: $("#J_Combox"),
            width: 200,
            dataSource: new ComboBox.LocalDataSource({
                data: data
            })
        });
        basicComboBox.render();
    });
    /**/
    KISSY.use('combobox', function (S, ComboBox) {
        var data = ["a123456", "b12345", "c3464356", "d23434"];

        var basicComboBox = new ComboBox({
            render: "#inp-combobox-container",
            autoHighlightFirst: true,
            dataSource: new ComboBox.LocalDataSource({
                data: data
            }),
            width: 200,
            maxItemCount: 5,
            format: function (query, data) {
                var ret = [];
                for (var i = 0; i < data.length; i++) {
                    ret[i] = {
                        content: (data[i] + "")
                                .replace(new RegExp(util.escapeRegExp(query), "g"),
                                        "<b>$&</b>"),
                        disabled: (i % 2 ? true : false)
                    };
                }
                return ret;
            }
        });
        basicComboBox.render();
    });

    /**
     * checked combobox
     */

    KISSY.use('combobox,util,node', function (S, ComboBox,util,$) {
        var data = ["a1234567", "a123456", "b12345", "c3464356", "d23434"];

        var basicComboBox = new ComboBox({
            render: "#inp-combobox-container-check",
            placeholder: "请输入",
            //value: "c3464356",
            dataSource: new ComboBox.LocalDataSource({
                data: data
            }),
            validator: function (v, callback) {
                callback(!util.inArray(v, data) ? "请选择提示框内容" : false);
            },
            width: 200,
            maxItemCount: 5,
            format: function (query, data) {
                var ret = [];
                for (var i = 0; i < data.length; i++) {
                    ret[i] = {
                        content: (data[i] + "")
                                .replace(new RegExp(util.escapeRegExp(query), "g"),
                                        "<b>$&</b>"),
                        disabled: (i % 2 ? true : false)
                    };
                }
                return ret;
            }
        });
        basicComboBox.render();

        $("#check").on("click", function () {
            basicComboBox.validate(function (v, val) {
                alert((v ? "没通过" : "通过") + " : " + val);
            });
        });

        $("#disable").on("click", function () {
            basicComboBox.set('disabled', this.checked);
        });
    });

    KISSY.use('combobox', function (S, ComboBox) {
        var data = ["a123456", "b12345", "c3464356", "d23434"];
        var basicComboBox = new ComboBox({
            srcNode: '#J_Combox_Check',
            placeholder: "请输入",
            // value: "c3464356",
            dataSource: new ComboBox.LocalDataSource({
                data: data
            }),
            validator: function (v, callback) {
                callback(!util.inArray(v, data) ? "请选择提示框内容" : false);
            },
            width: 200,
            maxItemCount: 5
        });
        basicComboBox.render();
    });
</script>
</body>
</html>